<template>
	<van-nav-bar title="我的订单" left-text="" left-arrow @click-left="goBack" />
	<van-tabs v-model:active="status" sticky @click-tab="getOrderData">
		<van-tab
			:title="item.name"
			v-for="item in statuslist"
			:name="item.id"
		></van-tab>
	</van-tabs>
	<van-card
		v-for="item in orderlist"
		:price="item.amount"
		:desc="'商品名称：' + item.info.product.name"
		:title="'订单号：' + item.code"
		:thumb="item.info.product.thumbs_text"
	>
		<template #tags>
			<div>下单时间：{{ item.createtime }}</div>
		</template>
		<template #num>
			<van-tag plain type="danger">{{ item.status_text }}</van-tag>
		</template>
		<template #footer>
			<van-button
				size="mini"
				type="primary"
				@click="toPage(item.id, '/business/order/info')"
				>订单详情</van-button
			>
			<van-button
				size="mini"
				type="danger"
				v-if="item.status > '0' && item.status != '4'"
				@click="toPage(item.id, '/business/order/refund')"
				>申请退货</van-button
			>
			<van-button
				size="mini"
				type="success"
				v-if="item.status == '2'"
				@click="confirmEvent(item.id)"
				>确认收货</van-button
			>
			<van-button
				size="mini"
				type="success"
				v-if="item.status == '0'"
				@click="confirm(item.id)"
				>确认支付</van-button
			>
			<van-button
				size="mini"
				type="success"
				v-if="item.status == '4'"
				@click="toPage(item.id, '/business/order/rateinfo')"
				>评价详情</van-button
			>
			<van-button
				size="mini"
				type="danger"
				v-if="item.status < '0'"
				@click="toPage(item.id, '/business/order/refundinfo')"
				>退货详情</van-button
			>
			<van-button
				size="mini"
				type="danger"
				v-if="item.status == '-3' && item.depot_text"
				@click="toPage(item.id, '/business/order/refundgoods')"
				>待退货</van-button
			>
			<van-button
				size="mini"
				type="warning"
				v-if="item.expresscode"
				@click="toPage(item.id, '/business/order/express')"
				>物流详情</van-button
			>
		</template>
	</van-card>
	<van-dialog
		v-model:show="show"
		title="立即支付"
		show-cancel-button
		confirmButtonText="立即支付"
		@confirm="onpayment"
		@cancel="show = false"
	>
		<van-field
			is-link
			readonly
			label="支付方式"
			v-model="test"
			placeholder="请选择支付方式"
			@click="show1 = true"
		/>
		<van-popup v-model:show="show1" round position="bottom">
			<van-cascader
				v-model="payment"
				title="支付方式"
				:options="way"
				@close="show1 = false"
				@finish="show1 = false"
				@change="onChange"
			/>
		</van-popup>
		<div class="way">是否继续支付金额</div>
	</van-dialog>
</template>
<script setup>
	const router = useRouter();
	const goBack = () => {
		history.back();
	};
	const statuslist = [
		{
			id: "",
			name: "全部",
		},
		{
			id: "0",
			name: "待支付",
		},
		{
			id: "1",
			name: "待发货",
		},
		{
			id: "2",
			name: "待收货",
		},
		{
			id: "3",
			name: "待评价",
		},
		{
			id: "4",
			name: "已完结",
		},
		{
			id: "-1",
			name: "售后中",
		},
		{
			id: "-4",
			name: "售后已结",
		},
	];
	const show = ref(false);
	const show1 = ref(false);
	const test = ref("余额");
	const orderid = ref(0);
	const way = [
		{ text: "余额", value: 2 },
		{ text: "微信", value: 0 },
		{ text: "支付宝", value: 1 },
	];
	const payment = ref(2);
	const status = ref("");
	const orderlist = ref([]);
	const { cookies } = useCookies();
	const LoginUser = reactive(cookies.get("LoginUser"));
	onBeforeMount(() => {
		getOrderData();
	});
	const getOrderData = async () => {
		let result = await Api.business.orderIndex({
			busid: LoginUser.id,
			status: status.value,
		});
		if (result.code == 1) {
			orderlist.value = result.data;
		}
	};
	const toPage = (id, url) => {
		router.push({
			path: url,
			query: {
				orderid: id,
			},
		});
	};
	// 确认收货
	const confirmEvent = async (id) => {
		showConfirmDialog({
			title: "确认收货",
			message: "确认是否真的收到商品?",
		})
			.then(async () => {
				let result = await Api.business.orderConfirm({
					busid: LoginUser.id,
					orderid: id,
				});
				if (result.code == 1) {
					getOrderData();
					showSuccessToast(result.msg);
				} else {
					showFailToast(result.msg);
				}
			})
			.catch(() => {});
	};
	// 支付订单
	const onpayment = async () => {
		let result = await Api.business.orderpayment({
			orderid: orderid.value,
			busid: LoginUser.id,
			way: payment.value,
		});
		if (result.code == 1) {
			if(result.msg == "支付订单创建成功"){
				router.push({path:'/business/order/pay',query:{
					id:result.data.id,
				}})
			}else{
				showSuccessToast({
				message: result.msg,
				onClose: function () {
					window.location.reload();
				},
			});
			}
			
		} else  {
			showFailToast(result.msg);
		} 
	};
	// 支付选择
	const onChange = ({ value }) => {
		way.forEach((item) => {
			if (item.value == value) {
				test.value = item.text;
			}
		});
	};
	// 确认支付
	const confirm = async (id) => {
		orderid.value = id;
		show.value = true;
	};
</script>
<style scoped>
	.van-dialog {
		height: 50%;
	}
	.way {
		padding: 40px 10px 20px;
		text-align: center;
		font-size: 20px;
		color: #b01f1f;
	}
</style>